<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="../build/minimap.js"></script>
<script>

  G6.registerEdge('relation', {
    draw(cfg, group) {
      const keyShape = group.addShape('path', {
        attrs: {
          path: [
            [ 'M', cfg.startPoint.x, cfg.startPoint.y ],
            [ 'L', cfg.endPoint.x, cfg.endPoint.y ]
          ],
          stroke: '#666',
          lineWidth: 2,
          lineAppendWidth: 4
        }
      });
      const center = keyShape.getPoint(0.5);
      const points = keyShape.getStartTangent();
      const angle = Math.atan((points[1][1] - points[0][1]) / (points[1][0] - points[0][0]));
      const shapeContainer = group.addGroup();
      /*shapeContainer.transform([
        ['t', -center.x, -center.y],
        ['r', angle],
        ['t', center.x, center.y]
      ]);*/
      shapeContainer.addShape('path', {
        attrs: {
          path: [
            [ 'M', center.x - 40, center.y ],
            [ 'L', center.x, center.y - 20 ],
            [ 'L', center.x + 40, center.y ],
            [ 'L', center.x, center.y + 20 ],
            [ 'Z' ]
          ],
          fill: '#fff',
          stroke: '#666'
        }
      });
      shapeContainer.addShape('text', {
        attrs: {
          text: cfg.relation,
          x: center.x,
          y: center.y,
          textAlign: 'center',
          textBaseline: 'middle',
          fill: '#666'
        }
      });
      let point = G6.Util.getLabelPosition(keyShape, 0, 10, 10, true);
      group.addShape('text', {
        attrs: {
          text: cfg.sourceEntity,
          x: point.x,
          y: point.y,
          rotate: point.rotate,
          fill: '#666'
        }
      });
      point = G6.Util.getLabelPosition(keyShape, 1, -15, 10, true);
      group.addShape('text', {
        attrs: {
          text: cfg.targetEntity,
          x: point.x,
          y: point.y,
          fill: '#666',
          rotate: point.rotate
        }
      });
      return keyShape;
    }
  });
  const minimap = new Minimap({ size: [ 160, 100 ] });
  const graph = new G6.Graph({
    container: 'mountNode',
    width: 800,
    height: 500,
    plugins: [ minimap ],
    modes: {
      default: [ 'drag-node', 'drag-canvas', 'zoom-canvas']
    }
  });
  const data = {
    nodes: [{
      id: 'customer',
      label: 'customer',
      x: 200,
      y: 200,
      shape: 'rect',
      size: [60, 40]
    }, {
      id: 'customer_id',
      label: 'customer_id',
      x: 120,
      y: 160,
      shape: 'ellipse',
      size: [80,40]
    }, {
      id: 'name',
      label: 'name',
      x: 140,
      y: 100,
      shape: 'ellipse',
      size: [80,40]
    }, {
      id: 'address',
      label: 'address',
      x: 180,
      y: 60,
      shape: 'ellipse',
      size: [80, 40]
    }, {
      id: 'email',
      label: 'email',
      x: 240,
      y: 110,
      shape: 'ellipse',
      size: [80, 40]
    }, {
      id: 'order',
      label: 'order',
      x: 400,
      y: 200,
      shape: 'rect',
      size: [60, 40]
    }, {
      id: 'order_id',
      label: 'order_id',
      x: 320,
      y: 130,
      shape: 'ellipse',
      size: [80, 40]
    }, {
      id: 'order_status',
      label: 'order_status',
      x: 380,
      y: 80,
      shape: 'ellipse',
      size: [80, 40]
    }, {
      id: 'total_price',
      label: 'total_price',
      x: 440,
      y: 150,
      shape: 'ellipse',
      size: [80, 40]
    }, {
      id: 'employee',
      label: 'employee',
      x: 380,
      y: 380,
      shape: 'rect',
      size: [60, 40]
    }, {
      id: 'employee_id',
      label: 'employee_id',
      x: 320,
      y: 440,
      shape: 'ellipse',
      size: [80, 40]
    }, {
      id: 'title',
      label: 'title',
      x: 440,
      y: 440,
      shape: 'ellipse',
      size: [80, 40]
    }],
    edges: [{
      id: 'c_id',
      source: 'customer',
      target: 'customer_id'
    }, {
      id: 'c_name',
      source: 'customer',
      target: 'name'
    }, {
      id: 'c_address',
      source: 'customer',
      target: 'address'
    }, {
      id: 'c_email',
      source: 'customer',
      target: 'email'
    }, {
      id: 'o_id',
      source: 'order',
      target: 'order_id'
    }, {
      id: 'o_price',
      source: 'order',
      target: 'total_price'
    }, {
      id: 'o_status',
      source: 'order',
      target: 'order_status'
    }, {
      id: 'c_o',
      source: 'customer',
      target: 'order',
      relation: 'places',
      sourceEntity: '1',
      targetEntity: 'N',
      shape: 'relation'
    }, {
      id: 'o_e',
      source: 'employee',
      target: 'order',
      relation: 'finalize',
      sourceEntity: '1',
      targetEntity: 'N',
      shape: 'relation'
    }, {
      id: 'e_id',
      source: 'employee',
      target: 'employee_id'
    }, {
      id: 'e_title',
      source: 'employee',
      target: 'title'
    }]
  };
  graph.data(data);
  graph.render();
</script>
</body>
</html>
